import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import ElementPlus from './plugins/element';
import { useUserStore } from './stores/user';
import { lazyLoad, imageLoader } from './utils/imageLoader';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.use(router);
app.use(ElementPlus);

// 全局注入用户store
app.config.globalProperties.$userStore = useUserStore;

// 注册全局指令
app.directive('lazy', lazyLoad);

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err);
  console.error('错误信息:', info);
  
  // 可以在这里添加错误上报逻辑
  if (process.env.NODE_ENV === 'production') {
    // 生产环境错误上报
    // reportError(err, info);
  }
};

// 全局警告处理
app.config.warnHandler = (msg, vm, trace) => {
  console.warn('全局警告:', msg);
  console.warn('警告追踪:', trace);
};

// 全局属性
app.config.globalProperties.$imageLoader = imageLoader;

// 全局方法
app.config.globalProperties.$formatPrice = (price) => {
  return `¥${parseFloat(price).toFixed(2)}`;
};

app.config.globalProperties.$formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN');
};

// 性能监控
if (process.env.NODE_ENV === 'development') {
  app.config.performance = true;
}

// 路由错误处理
router.onError((error) => {
  console.error('路由错误:', error);
  // 可以跳转到错误页面
  // router.push('/error');
});

// 应用挂载
app.mount('#app');

// 开发环境下的调试信息
if (process.env.NODE_ENV === 'development') {
  console.log('🚀 商城系统已启动');
  console.log('📱 当前环境:', process.env.NODE_ENV);
  console.log('🔧 Vue版本:', app.version);
}
